import React, { useEffect, useMemo, useState } from "react";
import "../../scss/hwb_css/topic.scss";
import { useSearchParams, useLocation, useNavigate } from "react-router-dom";
import {
  questionAPI,
  stageAPI,
  questionAPI_add,
  questionAPI_edit,
} from "./hwb_API";
import { Button, DatePicker, Form, Input, Select, Switch } from "antd";

function Topic() {
  const navigate = useNavigate();
  const { state } = useLocation();
  const [select, setSelect] = useSearchParams();
  const [text, setText] = useState("");

  //试题表
  const [question_list, setQuestion_list] = useState([]);
  let getQuestion = async () => {
    let {
      data: { question_list },
    } = await questionAPI();
    setQuestion_list(question_list);
  };
  //阶段表
  const [stage_list, setStage_list] = useState([]);
  let getStage = async () => {
    let {
      data: { stage_list },
    } = await stageAPI();
    setStage_list(stage_list);
  };

  //添加
  const { RangePicker } = DatePicker;
  const onFinish = async (values) => {
    // console.log('Success:', values);
    //添加
    if (text === "新增试题") {
      let obj = {
        title: values.title,
        cate: values.cate,
        difficulty: values.difficulty,
        options: [
          { title: values.aname, isRight: values.achecked },
          { title: values.bname, isRight: values.bchecked },
          { title: values.cname, isRight: values.cchecked },
          { title: values.dname, isRight: values.dchecked },
        ],
        answer: values.answer,
        belong: values.belong,
        timing: Date.now(),
      };
      let {
        data: { msg },
      } = await questionAPI_add({ obj });
      navigate(-1);
    } else {
      //编辑
      let obj = {
        title: values.title,
        cate: values.cate,
        difficulty: values.difficulty,
        options: [
          { title: values.aname, isRight: values.achecked },
          { title: values.bname, isRight: values.bchecked },
          { title: values.cname, isRight: values.cchecked },
          { title: values.dname, isRight: values.dchecked },
        ],
        answer: values.answer,
        belong: values.belong,
        timing: Date.now(),
      };
      let id = state.item._id;
      let {
        data: { msg },
      } = await questionAPI_edit({ obj, id });
      navigate(-1);
    }
  };

  const hui = useMemo(() => {
    if (state) {
      setText("编辑试题");
      return state.item;
    } else {
      setText("新增试题");
      return {
        belong: { _id: "" },
        options: [
          { title: "", isRight: false },
          { title: "", isRight: false },
          { title: "", isRight: false },
          { title: "", isRight: false },
        ],
      };
    }
  }, [state]);
  const [copy, setCopy] = useState(hui); //回显数据

  //重置
  const onReset = () => {
    navigate(-1);
  };

  //实现条件渲染
  // const tiao= useMemo(() => {
  //   if(copy[2].options.title===undefined){
  //     return false
  //   }else{
  //     return true
  //   }
  // },[])

  useEffect(() => {
    getQuestion();
    getStage();
  }, []);
  return (
    <div>
      <div className="topic">
        <div className="header">
          <p className="p1">{text}</p>
        </div>
        <div className="content">
          <div className="con1">
            <Form onFinish={onFinish}>
              {/* 分类 */}
              <div className="nav1">
                <Form.Item
                  label="试题分类："
                  name="belong"
                  //回显数据
                  initialValue={copy.belong._id}
                  rules={[
                    {
                      required: true,
                      message: "不允许为空!",
                    },
                  ]}
                >
                  <Select
                    showSearch
                    placeholder="请选择"
                    optionFilterProp="label"
                    options={stage_list.map((item) => ({
                      value: item._id,
                      label: item.name,
                    }))}
                    style={{ width: "18.75rem" }}
                  />
                </Form.Item>
                <Form.Item
                  label="题型："
                  name="cate"
                  initialValue={copy.cate}
                  rules={[
                    {
                      required: true,
                      message: "不允许为空!",
                    },
                  ]}
                >
                  <Select
                    showSearch
                    placeholder="请选择"
                    optionFilterProp="label"
                    options={[
                      {
                        value: 1,
                        label: "单选题",
                      },
                      {
                        value: 2,
                        label: "多选题",
                      },
                      {
                        value: 3,
                        label: "判断题",
                      },
                      {
                        value: 4,
                        label: "简答题",
                      },
                    ]}
                    style={{ width: "18.75rem" }}
                  />
                </Form.Item>
                <Form.Item
                  label="难度："
                  name="difficulty"
                  initialValue={copy.difficulty}
                  rules={[
                    {
                      required: true,
                      message: "不允许为空!",
                    },
                  ]}
                >
                  <Select
                    showSearch
                    placeholder="请选择"
                    optionFilterProp="label"
                    options={[
                      {
                        value: 1,
                        label: "简单",
                      },
                      {
                        value: 2,
                        label: "一般",
                      },
                      {
                        value: 3,
                        label: "困难",
                      },
                    ]}
                    style={{ width: "18.75rem" }}
                  />
                </Form.Item>
              </div>
              {/* 题干 */}
              <Form.Item
                label="题干："
                name="title"
                initialValue={copy.title}
                rules={[
                  {
                    required: true,
                    message: "不允许为空!",
                  },
                ]}
              >
                <Input placeholder="请输入题干" />
              </Form.Item>
              {/* 选项A： */}
              <Form.Item
                label="选项A："
                name="aname"
                initialValue={copy.options[0].title}
                rules={[
                  {
                    required: false,
                    message: "不允许为空!",
                  },
                ]}
              >
                <Input placeholder="请输入选项A内容" />
              </Form.Item>
              <Form.Item
                label="设置A为正确答案"
                name="achecked"
                initialValue={copy.options[0].isRight}
              >
                <Switch />
              </Form.Item>
              {/* 选项B： */}
              <Form.Item
                label="选项B："
                name="bname"
                initialValue={copy.options[1].title}
                rules={[
                  {
                    required: false,
                    message: "不允许为空!",
                  },
                ]}
              >
                <Input placeholder="请输入选项B内容" />
              </Form.Item>
              <Form.Item
                label="设置B为正确答案"
                name="bchecked"
                initialValue={copy.options[1].isRight}
              >
                <Switch />
              </Form.Item>
              {/* 选项C： */}

              {copy.cate!==3 ? (
                <div>
                  <Form.Item
                    label="选项C："
                    name="cname"
                    initialValue={copy.options[2].title}
                    rules={[
                      {
                        required: false,
                        message: "不允许为空!",
                      },
                    ]}
                  >
                    <Input placeholder="请输入选项C内容" />
                  </Form.Item>
                  <Form.Item
                    label="设置C为正确答案"
                    name="cchecked"
                    initialValue={copy.options[2].isRight}
                  >
                    <Switch />
                  </Form.Item>
                  {/* 选项D： */}
                  <Form.Item
                    label="选项D："
                    name="dname"
                    initialValue={copy.options[3].title}
                    rules={[
                      {
                        required: false,
                        message: "不允许为空!",
                      },
                    ]}
                  >
                    <Input placeholder="请输入选项D内容" />
                  </Form.Item>
                  <Form.Item
                    label="设置D为正确答案"
                    name="dchecked"
                    initialValue={copy.options[3].isRight}
                  >
                    <Switch />
                  </Form.Item>
                </div>
              ) : (
                ""
              )}
              {/* 解析 */}
              <Form.Item
                label="解析："
                name="answer"
                initialValue={copy.answer}
                rules={[
                  {
                    required: true,
                    message: "不允许为空!",
                  },
                ]}
              >
                <Input placeholder="请输入解析" />
              </Form.Item>

              <Form.Item
                wrapperCol={{
                  offset: 10,
                  span: 16,
                }}
              >
                <Button type="primary" htmlType="提交">
                  提交
                </Button>

                <Button htmlType="button" onClick={onReset}>
                  取消
                </Button>
              </Form.Item>
            </Form>
          </div>
          <div className="con2"></div>
        </div>
      </div>
    </div>
  );
}

export default Topic;
